<template>
  <div class="parameterTab">
    <!-- 顶部form表单 -->
    <el-form
      label-width="70px"
      :model="parameterFrom"
      class="demo-form-inline"
      size="mini"
    >
      <el-row>
        <el-col :span="6">
          <el-form-item label="参数名称:">
            <el-input v-model="parameterFrom.name"></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="参数类型:">
            <el-select v-model="parameterFrom.type" placeholder="输入">
              <el-option
                v-for="(item, index) in type"
                :key="index"
                :label="item.label"
                :value="item.label"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="必须:">
            <el-radio-group v-model="parameterFrom.required">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-radio label="true">是</el-radio>
                </el-col>
                <el-col :span="12">
                  <el-radio label="false">否</el-radio>
                </el-col>
              </el-row>
            </el-radio-group>
          </el-form-item>
        </el-col>

        <el-col :span="3">
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-plus"
              @click="metaDataSubmit"
              style="background: #2680d2"
              >添加
            </el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- table表格 -->
    <el-table :data="parameterTable" height="270" style="width: 100%">
      <el-table-column prop="name" label="参数名称"> </el-table-column>
      <el-table-column prop="type" label="参数类型"> </el-table-column>

      <el-table-column prop="required" label="是否必须">
        <template slot-scope="scope">
          {{ scope.row.required ? "是" : "否" }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="deleteRow(scope.$index, parameterTable)"
            type="text"
            icon="el-icon-delete"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  props: ["editParameter", "isParameter"],
  data() {
    return {
      parameterFrom: {
        name: "",
        type: "",
        required: "",
      },
      type: [
        { value: "0", label: "String" },
        { value: "1", label: "Double" },
        { value: "2", label: "Float" },
        { value: "3", label: "Boolean" },
        { value: "4", label: "Int32" },
        { value: "5", label: "Int64" },
        { value: "6", label: "UInt32" },
        { value: "7", label: "UInt64" },
        { value: "8", label: "SInt32" },
        { value: "9", label: "SInt64" },
        { value: "10", label: "Fixed32" },
        { value: "11", label: "Fixed64" },
        { value: "12", label: "SFixed32" },
        { value: "13", label: "SFixed64" },
      ],
      parameterTable: [],
      parameter: [],
    };
  },
  mounted() {
    // if (this.isParameter) {
    //   this.getmetaData();
    // }
  },
  watch: {
    editParameter: {
      handler(newVal, oldVal) {
        this.parameterTable = JSON.parse(JSON.stringify(newVal));
      },
    },
    isParameter: {
      //监听的对象
      deep: true, //深度监听设置为 true
      immediate: true,
      handler: function (newV, oldV) {
        if (this.isParameter) {
          this.getmetaData();
        }
      },
    },
  },
  methods: {
    clearData() {
      this.parameterFrom = {
        name: "",
        type: "",
        required: "",
      };
      this.parameterTable = [];
    },
    getmetaData() {
      var that = this;
      that.parameterTable = that.editParameter;
      that.parameter = that.editParameter;
    },
    // 删除
    deleteRow(index, rows) {
      //删除改行
      rows.splice(index, 1);
    },

    // 增加新数据
    metaDataSubmit() {
      if (
        this.parameterFrom.name == "" ||
        this.parameterFrom.type == "" ||
        this.parameterFrom.required == ""
      ) {
        return false;
      }
      this.parameterTable.unshift({
        name: this.parameterFrom.name,
        type: this.parameterFrom.type,
        required: this.parameterFrom.required,
      });
      this.parameter = this.parameterTable;
      this.$emit("sendParameter", this.parameter);
      this.parameterFrom = { name: "", type: "", required: "" };
    },
  },
};
</script>

<style scoped>
</style>